<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
</head>
<style>
    .layui-input-block {
        margin-left: 130px !important;
    }

    .layui-form-label {
        width: auto;
    }
</style>
<body style="height: 750px;background-color: white">
<div style="width:80%;margin:15px auto;text-align: center" class="layui-btn-group" id="btngroup">
    <button type="button" id="btnchina" class="layui-btn layui-btn-primary" onclick="clickbtn(0)">中文</button>
    <button type="button" id="btnenglish" class="layui-btn layui-btn-primary" onclick="clickbtn(1)">英语</button>
    <!--    泰语-->
    <button type="button" id="btnlaowo" class="layui-btn" onclick="clickbtn(2)">泰语</button>
    <button type="button" id="btnjianpuzhai" class="layui-btn layui-btn-primary" onclick="clickbtn(3)">柬埔寨</button>
</div>
<div style="width:80%;height:100%;margin:15px auto;">
    <form class="layui-form" action="">
        <div class="layui-form-item" id="title_div" style="display: none">
            <label class="layui-form-label">活动标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" placeholder="请输入活动标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_en_div" style="display: none">
            <label class="layui-form-label">英语活动标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title_en" id="title_en" placeholder="请输入英语标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_tai_div">
            <label class="layui-form-label">泰语活动标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title_tai" id="title_tai" required lay-verify="required" placeholder="请输入泰语标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_kh_div" style="display: none">
            <label class="layui-form-label">柬埔寨标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title_tai" id="title_kh" required lay-verify="required" placeholder="请输入柬埔寨标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="peisongDiv">
            <label class="layui-form-label">活动时间：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="date1"
                       style="width: 200px;display: inline-block;text-align: center;font-size: 20px" autocomplete="off">
                至
                <input type="text" class="layui-input" id="date2"
                       style="width: 200px;display: inline-block;text-align: center;font-size: 20px" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item" id="detail_div" style="display: none">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor" type="text/plain" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_english_div" style="display: none ">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_english" type="text/plain" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_tai_div">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_tai" type="text/plain" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_kh_div" style="display: none">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_kh" type="text/plain" style="height:500px;margin: auto"></script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
                <input type="radio" name="xianshi" value="1" title="显示" checked="">
                <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>显示
                </div>
                <input type="radio" name="xianshi" value="0" title="隐藏">
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>隐藏</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="启用" checked="">
                <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>启用
                </div>
                <input type="radio" name="status" value="0" title="禁用">
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>禁用</div>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;margin: auto">
            <div class="layui-input-block">
                <button class="layui-btn" id="addWuye" lay-submit lay-filter="addWuye">立即添加</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/admin/ueditor/1.4.3/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/admin/ueditor/1.4.3/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
</html>
<script>
    var $ = layui.$;
    var upload = layui.upload;
    var layedit = layui.layedit;
    var form = layui.form;
    var laydate = layui.laydate;
    var ue = UE.getEditor('editor');
    var ue_english = UE.getEditor('editor_english');
    var ue_tai = UE.getEditor('editor_tai');
    var ue_kh = UE.getEditor('editor_kh');

    //日期选择器
    laydate.render({
        elem: '#date1'
        , type: 'date' //默认，可不填
    });
    //日期选择器
    laydate.render({
        elem: '#date2'
        , type: 'date' //默认，可不填
    });

    //添加操作
    form.on('submit(addWuye)', function (data) {
        var detail = ue.getContent();
        var detail_english = ue_english.getContent();
        var detail_tai = ue_tai.getContent();
        var detail_kh = ue_kh.getContent();
        var title = $("#title").val();
        var title_en = $("#title_en").val();
        var title_tai = $("#title_tai").val();
        var title_kh    = $("#title_kh").val();
        var startTime = $("#date1").val();
        var endTime = $("#date2").val();
        var status = $("input[name='status']:checked").val();
        var xianshi = $("input[name='xianshi']:checked").val();
        if ($("#date1").val() == '' || $("#date2").val() == '') {
            layer.msg("请填活动时间");
        } else if (detail == null || detail == "") {
            layer.msg('请填写活动详情！');
        } else if (title_tai == '' || title_tai == null) {
            layer.msg("请填写泰语的标题");
        } else if (title == '' || title == null) {
            layer.msg("请填写中文的标题");
        } else {
            data.field.title= title;
            data.field.title_en=title_en;
            data.field.title_tai=title_tai;
            data.field.startTime=startTime;
            data.field.endTime=endTime;
            data.field.status=status;
            data.field.xianshi=xianshi;
            data.field.detail_en=detail_english;
            data.field.detail_tai=detail_tai;
            data.field.detail=detail;
            data.field.detail_kh=detail_kh;
            data.field.title_kh=title_kh;
            var msgMovie = layer.load(1);
            $.ajax({
                url: "/activities/addActivities",
                type: "post",
                contentType: 'application/json',
                data:JSON.stringify(data.field),
                success: function (data) {
                    if (data.code == 200) {
                        $("#addWuye").prop("disabled", true);
                        $("#addWuye").attr("class", "layui-btn layui-btn-disabled");
                        layer.close(layer.index);
                        layer.msg('添加成功');
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
                ,
                error: function () {
                    console.log("ajax error");
                }
            });
            layer.close(msgMovie);
        }
        return false;
    });

    function clickbtn(index) {
        var btns = $("#btngroup").find("button");
        if (index == 0) {
            $("#title_div").css("display", "block");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "block");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "none");
        } else if (index == 1) {
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "block");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "block");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "none");
        } else if (index == 2) {
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "block");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "block");
            $("#detail_kh_div").css("display", "none");
        }else if (index = 3){
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "block");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "block");
        }
        for (let i = 0; i < btns.length; i++) {
            if (i == index) {
                btns[i].setAttribute("class", "layui-btn");
                continue;
            }
            btns[i].setAttribute("class", "layui-btn layui-btn-primary");
        }
    }
</script>
</html>